<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BootstrapDemo</title>
    <!-- common -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!--工具类-->
    <script src="scriptes/Blactcat-utils.js"></script>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap-datetimepicker.js"></script>
    <script src="vendor/bootstrap/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script src="js/angular-ui-router.js"></script>
    <script src="js/ichart.1.2.min.js"></script>
    <script src="js/highcharts.js"></script>
    <script src="scriptes/app.js"></script>
    <script src="scriptes/controllers.js"></script>
    <script src="scriptes/services.js"></script>
    <script src="scriptes/route.js"></script>
    <script src="scriptes/directives.js"></script>
    <script src="js/bootstrap-paginator.js"></script>

    <link type="text/css" rel="stylesheet" href="vendor/bootstrap/css/bootstrap-datetimepicker.min.css">
    <link type="text/css" rel="stylesheet" href="styles/index.css">
    <link type="text/css" rel="stylesheet" href="styles/index.css">
    <link type="text/css" rel="stylesheet" href="styles/signin.css">
    <link type="text/css" rel="stylesheet" href="styles/signup.css">
    <link type="text/css" rel="stylesheet" href="styles/updateUser.css">

</head>
<body>
<div id="header">
    <nav ng-controller="HeaderController" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <a class="navbar-brand navbar-left" href="" ui-sref="home">Home</a>
            <p class="navbar-text navbar-left">生理信号管理系统<a class="navbar-link" href="#"></a></p>
            <a type="button" class="isNotSignIn user-state btn btn-primary navbar-btn navbar-right" data-toggle="modal"
               data-target="#signin">
                Sign in
            </a>
            <div class="hide isSignIn user-state navbar-text navbar-right">
                <a href="#" class="user-info" data-toggle="popover">
                    <span class="glyphicon glyphicon-user"></span>&nbsp;
                    <span ng-bind="user.nickname"></span>
                </a>
                <span>&nbsp;|&nbsp;</span>
                <a ng-click='logout()' class="btn btn-primary btn-xs">
                    注销
                </a>
            </div>
        </div>
    </nav>
</div><!-- header end!-->
<div id="content">
    <div class="left-navbar">
        <div class="container-fluid">
            <div class="logo">
                <img src="images/physiologicalSignal.png">
            </div><!--logo end!-->
            <!--<div class="input-group search">
                <input type="text" placeholder="search" class="search-input form-control">
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="button">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </span>
            </div>--><!-- left navbar end!-->
            <hr>
            <ul class="menu nav nav-pills nav-stacked" role="tablist">
                <li role="presentation"><a href=""  ui-sref="ecg"><span class="glyphicon glyphicon-heart"></span>&nbsp;&nbsp;&nbsp;&nbsp;心电值</a>
                </li>
                <li role="presentation"><a href=""  ui-sref="temperature"><span class="glyphicon glyphicon-road"></span>&nbsp;&nbsp;&nbsp;&nbsp;温度</a>
                </li>
                <li role="presentation"><a href="" ui-sref="bloodPressure"><span class="glyphicon glyphicon-tag"></span>&nbsp;&nbsp;&nbsp;&nbsp;血压值</a>
                </li>
            </ul>
        </div>
    </div><!-- left navbar end!-->
    <!-- 具体内容呈现 -->
    <div class="right-content">
        <div ui-view>
        </div>
    </div>

</div><!-- content end!-->
<div id="footer">

</div><!-- footer end -->

<!-- modal signin start -->
<div id="signin" class="modal fade" ng-controller="SignInController">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header text-center">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h2 class="modal-title">Sign in</h2>
            </div>
            <div class="modal-body">
                <h3>Great to have you back!</h3>
                <form role="form" name="signin">
                    <div class="form-group">
                        <label for="accountInput">Username</label>
                        <input type="text" autofocus required name="account" ng-model="account" class="form-control"
                               maxlength="18" id="accountInput" placeholder="请输入账号">
                        <span ng-show="accountFailInfo" style="color:red" class="help-block">账号不能为空！</span>
                    </div>
                    <div class="form-group">
                        <label for="passwordInput">Password</label>
                        <input type="password" ng-model="password" class="form-control" maxlength="18"
                               id="passwordInput" placeholder="请输入密码">
                        <span ng-show="passwordFailInfo" style="color:red" class="help-block">密码不能为空！</span>
                    </div>
                    <button type="submit" id="signInSubmit" ng-click="signIn()" class="btn btn-success btn-lg">
                        Sign in to your account
                    </button>
                    <div fail-info></div>
                    <p>New here? <a class="skipSignUp" data-dismiss="#signin" href="#">Create an account</a></p>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal sign in -->
<!-- modal signup start -->
<div id="signup" class="modal fade" ng-controller="SignUpController">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header text-center">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h2 class="modal-title">Sign up</h2>
            </div>
            <div class="modal-body">
                <fieldset class="form-step-1" ng-show="signUpFormStep">
                    <nav>
                        <a class="step-1">1. About you</a>
                        <a class="step-2">2. Your account</a>
                    </nav>
                    <div class="clear"></div>
                    <h3>Great to see you here!</h3>
                    <p class="note">Let’s set up your account in just a couple of steps.</p>
                    <form role="form">
                        <div class="form-group">
                            <label for="nickInput">Nickname</label>
                            <input ng-model="addNickname" type="text" class="form-control" maxlength="10" id="nickInput"
                                   placeholder="请输入昵称或真实姓名">
                            <span ng-show="nicknameFailInfo" style="color:red" class="help-block">昵称不能为空&hellip;</span>
                        </div>
                        <div class="form-group">
                            <label for="ageInput">Age</label>
                            <input type="text" ng-model="addAge" class="form-control" maxlength="3" id="ageInput" placeholder="请输入年龄">
                            <span ng-show="ageFailInfo" style="color:red" class="help-block">年龄不能为空切必须是大于0小于150的数字&hellip;</span>
                        </div>
                        <div class="form-group">
                            <label class="radio-inline">
                                <input type="radio" ng-model="addGender" name="gender" value="1">男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" ng-model="addGender" name="gender" value="2">女
                            </label>
                            <span ng-show="genderFailInfo" style="color:red" class="help-block">请选择性别&hellip;</span>
                        </div>
                        <button type="button" ng-click="setAccount()" class="btn btn-success btn-lg">Set up your account</button>
                        <p>Already got an account? <a class="skipSignIn" href="#">Sign in here</a></p>
                    </form>
                </fieldset><!-- /.form-step-1 -->
                <fieldset class="form-step-2" ng-hide="signUpFormStep">
                    <nav>
                        <a class="step-1" ng-click="toStep1()">1. About you</a>
                        <a class="step-2">2. Your account</a>
                    </nav>
                    <div class="clear"></div>
                    <h3><span>{{ addNickname }}</span>，Welcome!</h3>
                    <p class="note">You can use this account to access all of this system.</p>
                    <form role="form">
                        <div class="form-group">
                            <label for="signupAccountInput">Choose your username</label>
                            <input type="text" ng-model="addAccount" class="form-control" maxlength="18" id="signupAccountInput"
                                   placeholder="请输入账号">
                            <span ng-show="accountFailInfo" style="color:red" class="help-block">昵称不能为空&hellip;</span>
                        </div>
                        <div class="form-group">
                            <label for="signupPasswordInput">Choose your password</label>
                            <input type="password" ng-model="addPassword" class="form-control" maxlength="18" id="signupPasswordInput"
                                   placeholder="请输入密码">
                            <span>{{ addPassword }}</span>
                            <span ng-show="passwordFailInfo" style="color:red" class="help-block">昵称不能为空&hellip;</span>
                        </div>
                        <button type="submit" ng-click="submit()" class="signup btn btn-success btn-lg">Create your account</button>
                        <p>Already got an account? <a class="skipSignIn" href="#">Sign in here</a></p>
                    </form>
                </fieldset><!-- /.form-step-1 -->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal sign up -->
<!-- modal update userinformation-->
<div id="update-user" class="modal fade" ng-controller="UpdateUserController">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header text-center">
                <button type="button" class="close" data-dismiss="modal"><span  aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h2 class="modal-title">Modify</h2>
            </div>
            <div class="modal-body">
                <fieldset class="form-step-1" ng-show="formStep">
                    <form role="form" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">昵称</label>
                            <div class="col-sm-10">
                                <input ng-model="nickname" type="text" maxlength="10" class="form-control" placeholder="nickname">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">年龄</label>
                            <div class="col-sm-10">
                                <input ng-model="age" type="text" maxlength="3" class="form-control" placeholder="age">
                                <span ng-show="ageFail" style="color:red" class="help-block">年龄不能为空切必须是大于0小于150的数字&hellip;</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">性别</label>
                            <label class="radio-inline">
                                <input ng-model="gender" type="radio" name="gender" value="1">男
                            </label>
                            <label class="radio-inline">
                                <input ng-model="gender" type="radio" name="gender" value="2">女
                            </label>
                        </div>
                        <span ng-show="isFail" style="color:red" class="help-block">{{ failInfo }}</span>
                        <button type="button" ng-click="infoSubmit()" class="btn btn-success btn-lg">Modify your information</button>
                        <p><a href="#" ng-click="toStep2()">Modify your password</a></p>
                    </form>
                </fieldset><!-- /.form-step-1 -->
                <fieldset class="form-step-2" ng-hide="formStep">
                    <form role="form" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="password" ng-model="password" class="form-control" placeholder="请输入新密码&hellip;">
                                <span class="help-block">{{ password }}</span>
                                <span ng-show="pwFail" style="color:red" class="help-block">密码不能为空&hellip;</span>
                            </div>
                        </div>
                        <button type="button" ng-click="psSubmit()" style="margin-top:16px;" class="btn btn-success btn-lg">Modify your password</button>
                        <p><a href="#" ng-click="toStep1()">Modify your information</a></p>
                    </form>
                </fieldset><!-- /.form-step-1 -->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--全局弹出提示框-->
<div alert></div>



<script>
    $(function () {
        userInfo();
        //激活
        $("[data-toggle='popover']").popover();

        $('.skipSignUp').click(function () {
            $('#signin').modal('hide');
            setTimeout(function () {
                $('#signup').modal('show');
            }, 200)
        })
        $('.skipSignIn').click(function () {
            $('#signup').modal('hide');
            setTimeout(function () {
                $('#signin').modal('show');
            }, 200)
        })
        $('.menu > li').click(function(){
           $('.menu > li').removeClass('active');
            $(this).addClass('active');
        });
    });
    function userInfo(){
        var nickname = getCookie('user.nickname');
        var age = getCookie('user.age');
        var gender = getCookie('user.gender') == 1?'男':'女';
        $('.user-info').popover({
            animation:true,
            placement:'left',
            html:true,
            trigger:'focus',
            title:'<span>用户信息</span><button data-target="#update-user" data-toggle="modal" class="btn btn-primary btn-xs" style="margin-left:80px">修改信息</button>',
            content:'<table class="table">\
            <tr>\
                <td style="border:0px">昵称:</td>\
                <td style="border:0px">'+nickname+'</td>\
            </tr>\
            <tr>\
                <td style="border:0px">年龄:</td>\
                <td style="border:0px">'+age+'</td>\
            </tr>\
            <tr>\
                <td style="border:0px">性别：</td>\
                <td style="border:0px">'+gender+'</td>\
            </tr>\
            </table>',
        });
    }
</script>
</body>
</html>